<!-- <template>
	<view class='pages'>
		<scroll-view scroll-y="true" class='contentbox' @scrolltolower="scrolltolower">
			<view v-if="list.length == 0">
				<view style="height: 100rpx;"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="boxes" v-for="(item,index) in list" :key="index">
				<video class="myVideo" :src="item.url"></video>
				<view class="uniBtn base">
					<view>下单时间：2023-08-29 9:26:58</view>
					<image @click="downs(item.url)" src="@/static/mains/m10.png" mode=""></image>
				</view>
			</view>

			<view class="progress-container" v-if="isShowProgress">
				<view class="progress-box">
					<view class="text">文件下载中，请稍后......</view>
					<progress :percent="progress" show-info stroke-width="3" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				length: true,
				list: [{
					id: 1,
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/wap2appvsnative.mp4'
				}],
				isShowProgress: false,
				progress: 0,
			}
		},
		async onLoad() {
			await this.getList();
		},
		methods: {
			// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉')
				// 关闭下拉
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 上拉
			scrolltolower() {
				console.log('触底')
				if (this.length) {
					this.page++
					this.getList();
				}
			},
			// 列表
			async getList() {
				// let res = await this.$api.getshouyi({
				// 	uid:uni.getStorageSync("tokenUid"),
				// 	page: this.page,
				// 	listRows: this.limit,
				// });
				// if (res.code == 200) {
				// 	this.length = res.data.length == this.limit;
				// 	this.list.push(...res.data);
				// 	// 关闭下拉
				// 	uni.stopPullDownRefresh();
				// }
			},
			// 下载
			downs(url) {
				const downloadTask = uni.downloadFile({
					url: url,
					success: res => {
						if (res.statusCode === 200) {
							this.isShowProgress = false;
							console.log('下载成功');
						}
						let that = this;
						uni.getFileSystemManager().saveFile({
							tempFilePath: res.tempFilePath,
							success: function(red) {
								that.isShowProgress = false;
								uni.showModal({
									title: '提示',
									content: '文件已保存：' + red.savedFilePath,
									cancelText: '我知道了',
									confirmText: '打开文件',
									success: function(res) {
										if (res.confirm) {
											uni.openDocument({
												filePath: red.savedFilePath,
												success: (sus) => {
													console.log('成功打开');
												}
											})
										}
									}
								});
							}
						});
					}
				})
				
				downloadTask.onProgressUpdate((res) => {
					if (res.progress > 0) {
						this.isShowProgress = true;
					}
					this.progress = res.progress;
					console.log('下载进度：' + res.progress);
					// console.log('已下载长度：' + res.totalBytesWritten);
					// console.log('文件总长度：' + res.totalBytesExpectedToWrite);
				})
			}
			// uni.downloadFile({
			// 	url: url, //仅为示例，并非真实的资源
			// 	header: {
			// 		// 数据被编码为名称/值对
			// 		'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
			// 	},
			// 	success: (res) => {
			// 		if (res.statusCode === 200) {
			// 			console.log('下载成功', res);
			// 		}
			// 	}
			// });
		}
	}
</script>

<style scoped lang="less">
	.pages {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.progress-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba(0, 0, 0, .2);
		width: 750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;

		.progress-box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;

			.text {
				margin-bottom: 20rpx;
			}
		}
	}

	.contentbox {
		flex: 1;
		overflow: hidden;
		padding: 30rpx 0;

		.boxes {
			margin: 0rpx 25rpx 20rpx 25rpx;
			position: relative;
			background: #fff;
			border-radius: 5rpx;
			width: 700;
			height: 463rpx;

			.myVideo {
				width: 700rpx;
				height: 350rpx;
			}

			.base {
				font-size: 26rpx;
				color: #525252;
				padding: 30rpx 36rpx;

				image {
					width: 26rpx;
					height: 24rpx;
				}
			}
		}
	}
</style> -->